<template>
	<view class="fina-page">
		<view class="prev">
			<!-- 切换预约方式 -->
			<van-tabs v-model:active="active" @click-tab="onClickTab">
				
				<van-tab title="医生预约" class="expert">
					<view class="expert-wrap">
						<view class="expert-item" v-for="v,i in expert" :key="i">
							<image class="expert-img" :src="v.img"></image>
							<view class="expert-cont">
								<view class="line1">
									<text>{{v.name}} </text>
									<van-button type="primary" size="mini" @click="todoctor(v)">立即挂号</van-button>
								</view>
								<view class="line2">
									<view>职称</view>
									<view class="goodat">
										<view class="good">擅长:</view>
										<view class="at"> {{v.major}} </view>
									</view>
									<view class="nums">
										<view class="remain">
											<view>
												<u-tag text="剩余号源:" borderColor="transparent" size="mini" icon="order" 			plain></u-tag>
												{{nums}}
											</view>
											<view>
												<u-tag text="挂号费:" borderColor="transparent" size="mini"
													icon="red-packet" plain></u-tag>
												{{price}}
											</view>

										</view>
									</view>
								</view>

							</view>
						</view>
					</view>
				</van-tab>

				<van-tab title="日期预约" class="day">
					<view class="prevByTime">
						<van-icon name="calendar-o" />
						<text class="cd" @click="oncd">选择日期 {{ choosedate }}</text>
					</view>
					<view class="expert-item" v-for="v,i in expertDate" :key="i">
						<image class="expert-img" :src="v.img"></image>
						<view class="expert-cont">
							<view class="line1">
								<text>{{v.name}} </text>
								<van-button type="primary" size="mini" @click="todoctor(v)">立即挂号</van-button>
							</view>
							<view class="line2">
								<view>职称</view>
								<view class="goodat">
									<view class="good">擅长:</view>
									<view class="at"> {{v.major}} </view>
								</view>
								<view class="nums">
									<view class="remain">
										<view>
											<u-tag text="剩余号源:" borderColor="transparent" size="mini" icon="order" 	plain></u-tag>
											{{nums}}
										</view>
										<view>
											<u-tag text="挂号费:" borderColor="transparent" size="mini" icon="red-packet" 	plain></u-tag>
											{{price}}
										</view>

									</view>
								</view>
							</view>

						</view>
					</view>


				</van-tab>
			</van-tabs>
		</view>
		<!-- 日期选择器 -->
		<u-calendar :maxDate="maxDate" :show="showdate" :defaultDate="defaultDateMultiple" @close="onclose"
			@confirm="confirm"> </u-calendar>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onHide,
		onInit,
		onLaunch,
		onReady,
		onResize,
		onShow,
		onUnload
	} from "@dcloudio/uni-app"
	import {ref} from 'vue';
	import {showToast} from 'vant';
	import {yuYue} from '../../pinia/yuyue'
	const yuyue = yuYue()
	
	let active = ref(0)
	let nums = ref(20)
	let price = ref('12.00')
	let expert = ref([{
			name: '姓名1',
			major: '脑血管病，如脑梗死、脑出血、脑动脉硬化症、头晕、眩晕等诊治；运动障碍性疾',
			img: '../../static/tabicon/logo.png',
			money: 18,
			id: 1
		},
		{
			name: '姓名2',
			major: '擅长肝硬化食管胃底静脉曲张内镜下套扎及硬化剂注射，食管良，恶性狭窄扩张及支架植入治疗',
			img: '../../static/tabicon/logo.png',
			money: 18,
			id: 2
		}
	])

	// 根据选择的日期显示当天的在职医生 
	let expertDate = ref([{
			name: '姓名1',
			major: '脑血管病，如脑梗死、脑出血、脑动脉硬化症、头晕、眩晕等诊治；运动障碍性疾',
			img: '../../static/tabicon/logo.png',
			money: 18,
			id: 1
		},
		{
			name: '姓名1',
			major: '脑血管病，如脑梗死、脑出血、脑动脉硬化症、头晕、眩晕等诊治；运动障碍性疾',
			img: '../../static/tabicon/logo.png',
			money: 18,
			id: 2
		},
	])
	// 日期选择器
	let d = new Date();
	let year = d.getFullYear();
	let month = d.getMonth() + 1;
	month = month < 10 ? `0${month}` : month;
	let date = d.getDate();
	// 回显日期
	let choosedate = `${year}-${month}-${date}`
	// 默认选中日期
	let defaultDateMultiple = [`${choosedate}`]
	let showdate = ref(false);
	// 通过maxDate来定义可选择的时间范围
	let maxDate = `${year}-${month}-${date + 7}`;

	// 点击日期弹窗的确认, e--> [{0:'2023-08-30'}]
	const confirm = (e) => {
		choosedate = e[0]
		defaultDateMultiple = [choosedate]
		onclose()

	};
	// 点击日期弹窗的小叉叉
	const onclose = (() => {
		showdate.value = false
	})
	const oncd = () => {
		showdate.value = true
	}
	// 切换预约方式(医生 / 日期)
	const onClickTab = ({ title }) => {
			console.log(title)
			// showToast(title)
	}

	//点击立即挂号: 跳转到医师主页,并携带选择的医生id,将医生信息存入pinia中
	const todoctor = function(v) {
		// 没存入
		yuyue.updateDoctor(v)
		uni.navigateTo({
			url: '/views/doctor-page/doctor-page?id=' + v.id
		});
	}

	// 获取上个页面传递过来的科室信息,
	onLoad((params) => {
		// 根据科室信息发送请求,获得对应的科室上班医生,或者通过日期预约,得到该科室下的近期在职医生
		console.log(111, params)
		uni.setNavigationBarTitle({
			title: params.text
		})

	})
</script>

<style lang="scss">
	.fina-page {
		width: 100vw;
		height: calc(100vh - 44px);
	}

	.prev {
		height: calc(100vh - 44px);
		padding: 10px;
		box-sizing: border-box;
	}

	.expert-item {
		padding: 10px 5px;
		box-sizing: border-box;
		background-color: #eeeeee63;
		border-radius: 10px;
		margin: 10px;
		display: flex;
		justify-content: space-between;
		// align-items: start;
	}

	.expert-img {
		width: 50px;
		height: 50px;
		margin-top: 10px;
		border-radius: 100%;
		overflow: hidden;
	}

	.expert-cont {
		width: calc(100% - 70px);
	}

	.line1 {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.goodat {
		display: flex;
	}

	.good {
		width: 53px;
	}

	.at {
		width: 250px;
		height: 30px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.remain {
		display: flex;
		justify-content: space-between;
	}

	.title {
		color: $u-primary;
		text-align: center;
		padding: 20rpx 0 0 0;
	}

	.prevByTime {
		width: 100%;
		padding: 10px;
		border-radius: 10px;
		margin-top: 10px;
		background-color: #dee6ee63;
		box-sizing: border-box;

	}

	.cd {
		margin-left: 20px;
	}
</style>